<template>
  <child :name="name" title="标题" :age="age" @changAge="changAge" @changName="changName"></child>
</template>

<!-- <script>
import Child from './Child.vue'
export default {
  name: 'attrs',
  data() {
    return {
      name: '张三',
      age: 20
    }
  },
  components: {
    Child
  },
  methods: {
    changAge(value) {
      this.age = value
    },
    changName(value) {
      console.log('value: ', value)
      this.name = value
    }
  }
}
</script> -->

<script setup>
defineOptions({
  name: 'attrs'
})
import { ref } from 'vue'
import Child from './Child.vue'
const name = ref('张三')
const age = ref(20)
const changAge = (value) => {
  age.value = value
}
const changName = (value) => {
  name.value = value
}
</script>
